import React from 'react';
import {
  Form,
  Table,
  Modal,
  Pagination,
  Message,
} from 'antd';
const FormItem = Form.Item;
let taxesRecordModal = React.createClass({

  getInitialState() {
    return {
      pagination: {
        currentPage: 1,
        pageSize: 10
      },
      detailData:[],
    }
  },
  
  componentDidMount() {
     this.fetch();
  },

  fetch(param){
    let _me = this;
    let page = _me.state.pagination;
    var record=_me.props.record;
    let tenementId =record.tenementId;
    let params = Object.assign({}, {pageSize: 10, currentPage: page.currentPage ,tenementId: tenementId});
    Utils.sendAjax({
      url: '/funder/statistics/ownerDetail/findHistory',
      data: JSON.stringify(params),
      callback: function(result) {
        if (result.code == '200') {
          let pager = _me.state.pagination;
          pager.total = result.page.total;
          _me.setState({
            detailData: result.data,
            pagination: pager
          })
        } else {
          Message.error(result.message, 10)
        }
      }
    })
  },

  componentWillReceiveProps(nextProps) {
    this.fetch()
  },

  handleTableChange(pagination) {
      const pager = this.state.pagination;
      pager.currentPage = pagination.current;
      pager.current = pagination.current;
      this.setState({
          pagination: pager,
      });
      this.fetch();
  },

  handleCancel() {
    this.props.hideModal();
    const pager = this.state.pagination;
    pager.currentPage = 1;
    pager.current = pager.currentPage;
    this.setState({
      data: [],
      pagination: pager
    })
  },
  rowKey(data) {
    return data.id;
  },


  render() {
   const columns = [
      {
        title: '分期序列',
        dataIndex: 'order',
        render:(value,record,index)=>{ 
           var multiple=this.state.pagination.currentPage;
           return <span>第{(multiple-1)*10+(index+1)}期</span>
        }
      }, {
        title: '序列特征',
        dataIndex: 'sequenceFeature'
      }, {
        title: '应付款日',
        dataIndex: 'payTime'
      }, {
        title: '实付款日',
        dataIndex: 'realPayTime'
      }, {
        title: '应付账单金额(元)',
        dataIndex: 'payAmount'
      }, {
        title: '实付账单金额(元)',
        dataIndex: 'realPayAmount'
      }, {
        title: '支付状态',
        dataIndex: 'status',
       
      }
    ];
    return (
      <Modal title="查看业主账单" visible={this.props.visible}  onCancel={this.handleCancel} width={900} footer="" >
        
        <Table rowKey={this.rowKey} columns={columns} dataSource={this.state.detailData} defaultCurrent={1}
               onChange={this.handleTableChange}
               pagination={this.state.pagination}/>
      </Modal>

    );
  }
});

taxesRecordModal = Form.create()(taxesRecordModal)
export default taxesRecordModal